/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-12-19 23:26:54
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-01-08 09:49:58
 * @FilePath: /tuberculosis_screening_display_system/src/components/Map/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { defineComponent, onMounted, inject, watch } from "vue";
import * as echarts from "echarts";
// import usaJson from './geoJson.json';

import "./index.scss";

import { getGeoJson } from "@/api/global.api";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "Map",
  props: {
    height: {
      type: Number,
      default: 200,
    },
  },
  setup() {
    const code = inject("code");
    const router = useRouter();

    function initMap(geojson: any) {
      const dom = document.getElementById("map-container");
      const chart = echarts.init(dom);

      echarts.registerMap("map", geojson);

      chart.on("dblclick", function (params) {
        console.log("dblclick", params);
        const { value, name } = params;
        console.log("geojson", geojson);
        const feature = geojson.features.find(item => item.properties.name === name);
        console.log("feature", feature);
        const { adcode, level } = feature.properties;
        router.push({
          path: `/${level}/${adcode}`,
        });

        // if (!Number.isNaN(value) || value) {
        //   const feature = geojson.features[dataIndex];
        //   console.log("feature", feature);
        //   const { adcode, level } = feature.properties;
        //   router.push({
        //     path: `/${level}/${adcode}`,
        //   });

        // }
      });

      chart.setOption({
        tooltip: {
          trigger: "item",
          showDelay: 0,
          transitionDuration: 0.2,
        },
        visualMap: {
          type: "piecewise",
          left: "left",
          // text: '病例数（例）',
          textStyle: {
            color: "#ffffff",
          },
          pieces: [
            { gte: 50, label: "50以上" },
            { gte: 40, lt: 50, label: "40-50" },
            { gte: 30, lt: 40, label: "30-40" },
            { gte: 20, lt: 30, label: "20-30" },
            { gte: 10, lt: 20, label: "10-20" },
            { lt: 10, label: "10以下" },
          ],
        },

        series: [
          {
            type: "map",
            map: "map",
            nameProperty: "name",
            data: [
              {
                name: "成都市",
                value: 1000,
              },
            ],
            label: {
              show: true,
              color: "#FFFFFF",
            },
            itemStyle: {
              areaColor: "rgba(0,232,255,0.16)",
              borderColor: "#00e8ff",
              borderWidth: 1,
            },
            emphasis: {
              label: {
                show: true,
                color: "#FFFFFF",
                fontSize: 14,
                fontWeight: "bolder",
              },
              itemStyle: {
                areaColor: "inherit",
                borderColor: "#FFD03B",
                borderWidth: 2,
              },
            },
            select: {
              disabled: true,
            },
          },
        ],
      });
      return chart;
    }
    console.log("$route", router);

    watch(
      () => router.currentRoute.value.params.code,
      function (code) {
        const { name } = router.currentRoute.value;
        const isFull = ["province", "city"].includes(name);
        getGeoJson(code, isFull).then((result) => {
          initMap(result);
        });
      }
    );

    // watch(() => router.currentRoute.value.path, function(params) {
    //   console.log('watch', params)
    // })

    onMounted(() => {

      const { name } = router.currentRoute.value;      
      const isFull = ["province", "city"].includes(name);
      console.log('isFull', isFull)
      getGeoJson(code, isFull).then((result) => {
        initMap(result);
      });
    });
  },

  render() {
    return (
      <div className="map-wrapper full">
        <div id="map-container" className="map-container full"></div>
        {this.$slots.default && this.$slots.default()}
      </div>
    );
  },
});
